{template 'common/header'}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>领取礼物</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link href="{$murl}css/base.css" rel="stylesheet" type="text/css">
    <script src="{$murl}js/jquery-1.10.1.min.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        .hide {
            /*display: none;*/
            opacity: 0;
        }

        .draw-gift {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .draw-gift .draw-img {
            width: 100%;
            position: relative;
            margin-top: 6.5rem;
        }

        .draw-gift .draw-img .draw-down {
            position: absolute;
            width: 9rem;
            height: 9.9rem;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url({$murl}image/open-no.png);
            left: 50%;
            margin-left: -4.5rem;
            z-index: 10;
            /*-webkit-animation:draw-down 0.5s ease 1.2s 1 alternate;*/
            /*-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);*/
        }

        @-webkit-keyframes draw-down {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 0;
            }
        }

        .draw-gift .draw-img .draw-down2 {
            position: absolute;
            width: 9rem;
            height: 9.9rem;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url({$murl}image/open-before.png);
            left: 50%;
            margin-left: -4.5rem;
            z-index: 10;
            /*-webkit-animation:draw-down2 0.5s ease 1.4s 1 alternate;*/
            /*-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);*/
        }

        @-webkit-keyframes draw-down2 {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }

        .draw-gift .draw-img .draw-mid {
            position: absolute;
            width: 3rem;
            height: 3rem;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url({$murl}image/open.png);
            left: 50%;
            margin-left: -1.5rem;
            z-index: 100;
            top: 1.9rem;
            /*animation:open 0.3s linear 1s 3 alternate;*/
        }

        .draw-gift .draw-img .draw-mid-move {
            -webkit-animation: open 0.2s linear 0.5s infinite alternate;
            -webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
            animation: open 0.2s linear 0.5s infinite alternate;
            animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
        }

        @keyframes open {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(0.9);
            }
        }

        @-webkit-keyframes open {
            0% {
                -webkit-transform: scale(1);
            }
            100% {
                -webkit-transform: scale(0.9);
            }
        }

        .draw-gift .draw-img .draw-up {
            position: absolute;
            width: 9rem;
            height: 4.15rem;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url({$murl}image/open-back-1.png);
            left: 50%;
            margin-left: -4.5rem;
            top: 0;
            z-index: 8;
            opacity: 0;
        }

        .draw-gift .draw-img .draw-up-up {
            position: absolute;
            width: 9rem;
            height: 4.12rem;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url({$murl}image/open-back-2.png);
            left: 50%;
            margin-left: -4.5rem;
            top: 0;
            /*-webkit-transform: rotateX(180deg);*/
            /*-webkit-transform-style: flat;*/
            /*-webkit-transform-origin: bottom;*/
            /*-webkit-animation: draw-up-up 1s linear 0s 0.5 normal;*/
            /*backface-visibility: visible;*/
            /*-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);*/
            opacity: 0;
            z-index: 3;
        }

        .draw-gift .draw-img .draw-list {
            position: absolute;
            width: 5rem;
            height: 6rem;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url({$murl}image/draw-list-bg.jpg);
            left: 50%;
            margin-left: -2.5rem;
            top: 3.5rem;
            opacity: 0;
            z-index: 8;
        }

        .draw-gift .draw-img .draw-list img {
            vertical-align: middle;
            position: absolute;
            width: 70%;
            top: 1.6rem;
            left: 15%;
        }

        #draw-btn {
            position: absolute;
            width: 100%;
            text-align: center;
            font-size: 0.65rem;
            color: #333;
            top: 17rem;
        }
    </style>
</head>
<body>
<div class="draw-gift">
    <div class="draw-img">
        <div class="draw-up hide"></div>
        <div class="draw-up-up" id="draw-up-up"></div>
        <div class="draw-mid draw-mid-move"></div>
        <div class="draw-down"></div>
        <div class="draw-down2 hide"></div>
        <div class="draw-list"><img src="{$murl}image/open-hagen.jpg"></div>
    </div>
    <a href="javascript:;" id="draw-btn">点击打开</a>
</div>
<script>
    $(function () {
        $("#draw-btn,.draw-img").on("click", function () {
            $(".draw-mid").removeClass("draw-mid-move").css({display:"none"});
            $(".draw-up").animate({
                opacity: "1"
            }, 100);
            $("#draw-up-up").animate({
                opacity: "1",
                top: "-4.12rem"
            }, 200);

            $(".draw-down").animate({
                opacity: "0"
            }, 300);
            $(".draw-down2").animate({
                opacity: "1"
            }, 300);
            $(".draw-list").animate({opacity:"1"},600).animate({top:"-4.4rem"},1000);
        });
    })
</script>
</body>
</html>